feat(web): animate task completion segments - #10259

Current revision ed8a0068f: replaced the simple Motion tween with Tailwind transform classes and motion-reduce:transition-none, and removed the unused Motion dependency. 82 focused composer tests and web typecheck pass; scoped lint/format/diff checks pass. This remains a draft pending fresh integrated UI proof.

What Changed

Completed tasks now fill their small progress segment over a 180 ms tween while the current-task label and completed count update immediately. A CSS transform transition animates only the decorative fill; it no longer loads Motion. Existing tasks render at their current state when mounted, and reduced motion skips the tween.

Why

The existing progress strip switches colors instantly. A brief fill makes real task completion easier to notice without delaying task state or moving the disclosure control. Related: #10250. This leaves the task-row status semantics in #10128 to that PR.

Earlier UI evidence

These recordings predate the CSS implementation at ed8a006. Fresh integrated CSS/reduced-motion proof is pending. Actual base and candidate ComposerTasksBadge components were recorded with the same synthetic task sequence in the isolated Vite app: complete a task, reverse and re-complete after 75 ms, then reopen history. The fixture exercises real rendering, but does not exercise provider ingestion or the full ChatView lifecycle. Base eee0557; candidate 94e5450; dark theme, 1280×800 CSS viewport. Contextual crops, no deliberate playback speed change; recordings illustrate the transition and do not establish exact 180 ms timing.

Before:

After:

Before video · After video · Before image · After image

At 390 CSS pixels the segments remain hidden and the fixture has no horizontal overflow. Native reduced-motion emulation is unavailable through the attached preview tools, so runtime reduced-motion verification and the full provider-driven ChatView pass remain readiness gaps. This remains a draft. The native mobile client is outside this change.

Validation: CI=true pnpm exec vp test run apps/web/src/composer-logic.test.ts apps/web/src/components/composerFooterLayout.test.ts passed 82 tests across 2 files. Targeted vp lint and vp fmt --check passed, as did git diff --check. Installed package exports resolve motion and useReducedMotion from motion/react at 13.2.0.

The task-state boundary check CI=true pnpm exec vp test run apps/web/src/session-logic.test.ts -t deriveActivePlanState passed 6 tests (93 unrelated tests skipped by filter).

The worker's initial typecheck failed on workspace dependency diagnostics. Primary then installed the frozen lockfile in a fresh isolated integration worktree and ran vp run --filter @t3tools/web typecheck: exit 0 with the candidate integrated. The first worker test/lint attempt failed on missing workspace dependencies; installing the frozen lockfile repaired those checks.

Best-effort independent review: direct claude --model claude-opus-5 --effort high --print --output-format json --permission-mode plan --allowedTools Read Glob Grep --no-session-persistence exited 1 before inference: OAuth session expired and could not be refreshed. Claude did not review this change.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Model and harness: GPT-6 Astra medium in Codex/T3 Code.